import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, List, Tooltip } from 'antd';
import { CopyOutlined, DownloadOutlined, PlusOutlined, MinusOutlined, EditOutlined, CheckOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Paragraph } = Typography;
const { TextArea } = Input;

interface OutlineItem {
  id: string;
  content: string;
  level: number;
  editing: boolean;
}

/**
 * 内容大纲功能
 * 根据文章主题和重点，自动生成文章大纲结构
 */
const ContentOutlinePage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [outlineItems, setOutlineItems] = useState<OutlineItem[]>([]);
  const [editingItem, setEditingItem] = useState<string | null>(null);
  const [tourVisible, setTourVisible] = useState<boolean>(false);

  // 创建ref引用
  const articleTopicRef = useRef<HTMLDivElement>(null);
  const keyPointsRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const outlineResultRef = useRef<HTMLDivElement>(null);
  const outlineActionsRef = useRef<HTMLDivElement>(null);

  // 组织ref引用
  const tourRefs = {
    articleTopic: articleTopicRef,
    keyPoints: keyPointsRef,
    generateButton: generateButtonRef,
    outlineResult: outlineResultRef,
    outlineActions: outlineActionsRef
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'articleTopic',
      title: '输入文章主题',
      description: '请输入您想要生成大纲的文章主题',
    },
    {
      key: 'keyPoints',
      title: '添加重点内容（可选）',
      description: '输入需要包含在大纲中的关键点，每行一个重点',
    },
    {
      key: 'generateButton',
      title: '生成大纲',
      description: '点击此按钮开始AI大纲生成过程',
    },
    {
      key: 'outlineResult',
      title: '查看生成的大纲',
      description: '生成完成后，您可以在此处查看详细的大纲结构',
    },
    {
      key: 'outlineActions',
      title: '大纲操作',
      description: '您可以复制或下载生成的大纲，也可以编辑大纲中的各个项目',
    },
  ];

  // 显示引导
  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 处理表单提交，生成大纲
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const articleTopic = values.articleTopic || '';
      const keyPoints = values.keyPoints || '';

      if (!articleTopic.trim()) {
        message.warning('请输入文章主题');
        return;
      }

      setLoading(true);
      setOutlineItems([]);

      // 模拟API调用延迟
      setTimeout(() => {
        // 生成大纲内容
        const outline = generateOutline(articleTopic, keyPoints);
        setOutlineItems(outline);
        setLoading(false);
        message.success('大纲生成成功！');
      }, 2000);
    } catch (error) {
      setLoading(false);
      message.error('生成失败，请重试');
    }
  };

  // 生成大纲内容
  const generateOutline = (topic: string, points: string): OutlineItem[] => {
    // 这里是模拟大纲生成逻辑，实际应用中应该调用AI模型
    const outline: OutlineItem[] = [];

    // 一级标题 - 引言部分
    outline.push({
      id: '1',
      content: '引言：为什么' + topic + '很重要',
      level: 1,
      editing: false
    });

    // 二级标题 - 背景介绍
    outline.push({
      id: '1-1',
      content: topic + '的历史背景和发展现状',
      level: 2,
      editing: false
    });

    // 二级标题 - 重要性分析
    outline.push({
      id: '1-2',
      content: topic + '在当代社会/行业中的重要性',
      level: 2,
      editing: false
    });

    // 一级标题 - 核心内容
    outline.push({
      id: '2',
      content: topic + '的核心概念与原理',
      level: 1,
      editing: false
    });

    // 二级标题 - 基本概念
    outline.push({
      id: '2-1',
      content: topic + '的定义和基本特征',
      level: 2,
      editing: false
    });

    // 三级标题 - 关键要素
    outline.push({
      id: '2-1-1',
      content: topic + '的关键组成部分和要素',
      level: 3,
      editing: false
    });

    // 二级标题 - 主要原理
    outline.push({
      id: '2-2',
      content: topic + '背后的科学/理论原理',
      level: 2,
      editing: false
    });

    // 一级标题 - 应用案例
    outline.push({
      id: '3',
      content: topic + '的实际应用案例分析',
      level: 1,
      editing: false
    });

    // 二级标题 - 成功案例
    outline.push({
      id: '3-1',
      content: '国内外' + topic + '的成功应用案例',
      level: 2,
      editing: false
    });

    // 二级标题 - 实践经验
    outline.push({
      id: '3-2',
      content: topic + '应用中的实践经验与教训',
      level: 2,
      editing: false
    });

    // 一级标题 - 挑战与解决方案
    outline.push({
      id: '4',
      content: topic + '面临的挑战与解决方案',
      level: 1,
      editing: false
    });

    // 二级标题 - 主要挑战
    outline.push({
      id: '4-1',
      content: '当前' + topic + '发展面临的主要问题与挑战',
      level: 2,
      editing: false
    });

    // 二级标题 - 解决策略
    outline.push({
      id: '4-2',
      content: '应对' + topic + '挑战的创新策略与方法',
      level: 2,
      editing: false
    });

    // 一级标题 - 未来展望
    outline.push({
      id: '5',
      content: topic + '的未来发展趋势与展望',
      level: 1,
      editing: false
    });

    // 二级标题 - 趋势预测
    outline.push({
      id: '5-1',
      content: topic + '在技术/市场/社会层面的发展趋势',
      level: 2,
      editing: false
    });

    // 二级标题 - 前景展望
    outline.push({
      id: '5-2',
      content: topic + '的长远发展前景与潜力',
      level: 2,
      editing: false
    });

    // 一级标题 - 结论
    outline.push({
      id: '6',
      content: '结论：总结' + topic + '的核心价值与意义',
      level: 1,
      editing: false
    });

    // 如果有关键点，添加自定义内容
    if (points.trim()) {
      // 将关键点分割成数组
      const customPoints = points.split('\n').filter(p => p.trim());
      if (customPoints.length > 0) {
        // 在核心内容部分插入自定义关键点
        const coreContentIndex = outline.findIndex(item => item.id === '2');

        customPoints.forEach((point, index) => {
          const newItem: OutlineItem = {
            id: `custom-${index + 1}`,
            content: point.trim(),
            level: 3,
            editing: false
          };
          outline.splice(coreContentIndex + 2 + index, 0, newItem);
        });
      }
    }

    return outline;
  };

  // 复制大纲内容
  const handleCopy = () => {
    if (outlineItems.length === 0) {
      message.warning('没有可复制的内容');
      return;
    }

    // 将大纲转换为文本格式
    const outlineText = outlineItems
      .map(item => {
        const indent = '  '.repeat(item.level - 1);
        const prefix = '#'.repeat(item.level) + ' ';
        return indent + prefix + item.content;
      })
      .join('\n');

    navigator.clipboard.writeText(outlineText).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败，请手动复制');
    });
  };

  // 下载大纲内容
  const handleDownload = () => {
    if (outlineItems.length === 0) {
      message.warning('没有可下载的内容');
      return;
    }

    // 将大纲转换为文本格式
    const outlineText = outlineItems
      .map(item => {
        const indent = '  '.repeat(item.level - 1);
        const prefix = '#'.repeat(item.level) + ' ';
        return indent + prefix + item.content;
      })
      .join('\n');

    const blob = new Blob([outlineText], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '文章大纲.txt';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    message.success('内容已下载');
  };

  // 开始编辑大纲项
  const handleStartEdit = (id: string) => {
    setEditingItem(id);
    // 更新对应项的editing状态
    setOutlineItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, editing: true } : item
      )
    );
  };

  // 保存编辑的大纲项
  const handleSaveEdit = (id: string, newContent: string) => {
    setOutlineItems(prevItems =>
      prevItems.map(item =>
        item.id === id
          ? { ...item, content: newContent, editing: false }
          : item
      )
    );
    setEditingItem(null);
  };

  // 取消编辑
  const handleCancelEdit = (id: string) => {
    setOutlineItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, editing: false } : item
      )
    );
    setEditingItem(null);
  };

  // 添加子项
  const handleAddSubItem = (parentId: string) => {
    const parentItem = outlineItems.find(item => item.id === parentId);
    if (!parentItem) return;

    const newLevel = parentItem.level + 1;
    const newId = `${parentId}-${Date.now()}`;
    const newItem: OutlineItem = {
      id: newId,
      content: `添加${newLevel}级标题`,
      level: newLevel,
      editing: true
    };

    // 找到父项在数组中的位置，并在其后插入新项
    const parentIndex = outlineItems.findIndex(item => item.id === parentId);
    let insertIndex = parentIndex + 1;

    // 检查后续项目的级别，如果低于或等于父项级别，则在第一个这样的项目前插入
    for (let i = parentIndex + 1; i < outlineItems.length; i++) {
      if (outlineItems[i].level <= parentItem.level) {
        insertIndex = i;
        break;
      }
    }

    // 如果没有找到更高级别的项目，则在末尾插入
    if (insertIndex >= outlineItems.length) {
      setOutlineItems([...outlineItems, newItem]);
    } else {
      const newItems = [...outlineItems];
      newItems.splice(insertIndex, 0, newItem);
      setOutlineItems(newItems);
    }

    // 自动进入编辑状态
    setEditingItem(newId);
  };

  // 删除大纲项
  const handleDeleteItem = (id: string) => {
    // 找到该项及其所有子项
    const itemsToDelete: string[] = [id];
    const itemLevel = outlineItems.find(item => item.id === id)?.level || 0;

    // 查找所有子项（id以当前项id开头且级别更高）
    outlineItems.forEach(item => {
      if (item.id.startsWith(`${id}-`) && item.level > itemLevel) {
        itemsToDelete.push(item.id);
      }
    });

    // 删除项
    setOutlineItems(prevItems =>
      prevItems.filter(item => !itemsToDelete.includes(item.id))
    );
    message.success('已删除大纲项及其子项');
  };

  // 清空所有内容
  const handleClear = () => {
    form.resetFields();
    setOutlineItems([]);
  };

  // 渲染大纲项
  const renderOutlineItem = (item: OutlineItem) => {
    const { id, content, level } = item;
    const isEditing = editingItem === id;
    const [editValue, setEditValue] = useState(content);

    // 计算缩进
    const indent = level * 20;

    return (
      <div
        key={id}
        style={{
          paddingLeft: `${indent}px`,
          marginBottom: '8px',
          display: 'flex',
          alignItems: 'center',
          gap: '8px'
        }}
      >
        {isEditing ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', width: '100%' }}>
            <TextArea
              value={editValue}
              onChange={(e) => setEditValue(e.target.value)}
              rows={1}
              style={{ flex: 1, resize: 'none' }}
              autoFocus
              onPressEnter={() => handleSaveEdit(id, editValue)}
            />
            <Button
              type="text"
              icon={<CheckOutlined />}
              onClick={() => handleSaveEdit(id, editValue)}
              size="small"
            />
            <Button
              type="text"
              danger
              onClick={() => handleCancelEdit(id)}
              size="small"
            />
          </div>
        ) : (
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', width: '100%' }}>
            <div style={{ flex: 1 }}>
              {level === 1 && <strong>{content}</strong>}
              {level === 2 && <span style={{ fontWeight: 600 }}>{content}</span>}
              {level >= 3 && <span>{content}</span>}
            </div>
            <Tooltip title="编辑">
              <Button
                type="text"
                icon={<EditOutlined />}
                onClick={() => handleStartEdit(id)}
                size="small"
              />
            </Tooltip>
            <Tooltip title="添加子项">
              <Button
                type="text"
                icon={<PlusOutlined />}
                onClick={() => handleAddSubItem(id)}
                size="small"
                disabled={level >= 3} // 限制最多3级标题
              />
            </Tooltip>
            <Tooltip title="删除">
              <Button
                type="text"
                danger
                icon={<MinusOutlined />}
                onClick={() => handleDeleteItem(id)}
                size="small"
              />
            </Tooltip>
          </div>
        )}
      </div>
    );
  };

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Typography>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Title level={1}>内容大纲<TourGuideButton onClick={showTour} /></Title>
          </div>
          <Paragraph>
            输入文章主题和重点，AI将自动生成结构化的文章大纲。
          </Paragraph>
        </Typography>

        <Row gutter={[16, 16]}>
          <Col xs={24} lg={12}>
            <Card title="大纲设置" size="small">
              <Form
                form={form}
                layout="vertical"
              >
                <Form.Item
                  label="文章主题"
                  name="articleTopic"
                  rules={[{ required: true, message: '请输入文章主题' }]}
                >
                  <div ref={articleTopicRef}>
                    <Input
                      placeholder="请输入您要撰写的文章主题"
                      maxLength={100}
                      showCount
                    />
                  </div>
                </Form.Item>

                <Form.Item
                  label="重点内容（可选）"
                  name="keyPoints"
                >
                  <div ref={keyPointsRef}>
                    <TextArea
                      rows={6}
                      placeholder="请输入文章中需要包含的重点内容，每行一个重点"
                      maxLength={500}
                      showCount
                    />
                  </div>
                </Form.Item>

                <Row gutter={[8, 8]}>
                  <Col span={12}>
                    <div ref={generateButtonRef}>
                      <Button
                        type="primary"
                        onClick={handleSubmit}
                        loading={loading}
                        block
                      >
                        {loading ? '生成中...' : '生成大纲'}
                      </Button>
                    </div>
                  </Col>
                  <Col span={12}>
                    <Button
                      onClick={handleClear}
                      block
                    >
                      清空内容
                    </Button>
                  </Col>
                </Row>
              </Form>
            </Card>
          </Col>

          <Col xs={24} lg={12}>
            <Card title="生成的大纲" size="small" ref={outlineResultRef}>
              {loading ? (
                <div style={{ textAlign: 'center', padding: '60px 0' }}>
                  <Spin size="large" />
                  <p style={{ marginTop: '16px' }}>正在生成大纲，请稍候...</p>
                </div>
              ) : outlineItems.length > 0 ? (
                <div>
                  <div style={{
                    backgroundColor: '#f5f5f5',
                    padding: '16px',
                    borderRadius: '4px',
                    maxHeight: '500px',
                    overflowY: 'auto'
                  }}>
                    <List
                      dataSource={outlineItems}
                      renderItem={renderOutlineItem}
                      locale={{ emptyText: '暂无大纲内容' }}
                    />
                  </div>
                  <div style={{ marginTop: '16px', textAlign: 'right' }} ref={outlineActionsRef}>
                    <Button
                      type="primary"
                      icon={<CopyOutlined />}
                      onClick={handleCopy}
                      style={{ marginRight: '8px' }}
                    >
                      复制大纲
                    </Button>
                    <Button
                      icon={<DownloadOutlined />}
                      onClick={handleDownload}
                    >
                      下载大纲
                    </Button>
                  </div>
                </div>
              ) : (
                <div style={{ textAlign: 'center', padding: '60px 0', color: '#999' }}>
                  大纲将显示在这里
                </div>
              )}
            </Card>
          </Col>
        </Row>
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
};

export default ContentOutlinePage;